<template>
  <div class="emergency-shelter bg-background text-foreground p-4">
    <h2 class="text-2xl font-bold mb-4">医疗机构管理</h2>

    <!-- Search Bar -->
    <div class="search-form bg-card text-card-foreground shadow-md rounded-lg mb-6 p-6">
      <query-form :model="search" :formItems="formItems" @search="searchShelters" @reset="resetSearch" />
    </div>

    <!-- Action Buttons -->
    <div class="mb-4 space-x-2">
      <el-button type="primary" @click="openAddDialog" style="width: 75px; height: 30px;">新增</el-button>
      <el-button @click="deleteSelected" style="width: 75px; height: 30px;">删除</el-button>
      <el-button @click="openImportDialog" style="width: 75px; height: 30px;">导入</el-button>
      <el-button @click="exportData" style="width: 75px; height: 30px;">导出</el-button>
    </div>
    <el-table v-loading="loading" :data="displayedShelterData" style="width: 100%"
      @selection-change="handleSelectionChange" ref="tableRef" align="center" class="data-table"
      :header-cell-style="headerCellStyle" empty-text="暂无数据" :row-key="rowKey">
      <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
      <el-table-column label="序号" width="55" header-align="center" align="center">
        <template #default="scope">
          {{ startIndex + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="resource_code" label="机构编码" header-align="center" align="center"></el-table-column>
      <el-table-column prop="admin_div" label="行政区划" header-align="center" align="center"></el-table-column>
      <el-table-column prop="resource_name" label="机构名称" header-align="center" align="center"></el-table-column>
      <el-table-column prop="resource_type" label="机构类别" header-align="center" align="center"></el-table-column>
      <el-table-column prop="resource_grade" label="机构等级" header-align="center" align="center"></el-table-column>
      <el-table-column prop="address" label="地址" header-align="center" align="center"></el-table-column>
      <el-table-column prop="longitude" label="经度" header-align="center" align="center"></el-table-column>
      <el-table-column prop="latitude" label="纬度" header-align="center" align="center"></el-table-column>
      <el-table-column prop="contact_person" label="负责人" header-align="center" align="center"></el-table-column>
      <el-table-column prop="contact_number" label="联系方式" header-align="center" align="center"></el-table-column>
      <el-table-column label="操作" header-align="center" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" @click="editShelter(scope.row)" link>编辑</el-button>
          <el-button type="primary" size="small" @click="viewDetails(scope.row)" link>查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- Pagination -->
    <div class="mt-4 flex justify-between items-center">
      <div>
        <p class="text-sm text-muted-foreground">
          一共检索到 <span class="font-medium total-num">{{ totalItems }}</span> 条信息
        </p>
      </div>
      <div class="flex items-center space-x-2">
        <button @click="prevPage" :disabled="currentPage === 1" class="btn btn-secondary btn-sm"
          :class="{ 'opacity-50 cursor-not-allowed': currentPage === 1 }">
          上一页
        </button>
        <span class="text-sm text-muted-foreground">
          {{ currentPage }} / {{ totalPages }}
        </span>
        <button @click="nextPage" :disabled="currentPage === totalPages" class="btn btn-secondary btn-sm"
          :class="{ 'opacity-50 cursor-not-allowed': currentPage === totalPages }">
          下一页
        </button>
      </div>
    </div>

    <!-- Add Shelter Dialog -->
    <el-dialog class="dialog-from" v-model="isAddDialogOpen" :title="isDialogType == 'add' ? '医疗机构新增' : '医疗机构编辑'"
      width="900" destroy-on-close align-center>
      <div class="body-item">
        <div class="box-title">
          <div class="box-color"></div><strong>基本信息</strong>
        </div>
        <div class="box-content">
          <el-form :model="newShelter" label-width="auto" :rules="rules" ref="formRef">
            <el-row :gutter="80" class="row-item">
              <el-col :span="8">
                <el-form-item label="机构编码：" label-position="top" prop="resource_code">
                  <el-input v-model="newShelter.resource_code" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="行政区划：" label-position="top" prop="admin_div">
                  <el-input v-model="newShelter.admin_div" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="机构名称：" label-position="top" prop="resource_name">
                  <el-input v-model="newShelter.resource_name" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="80" class="row-item">
              <el-col :span="8">
                <el-form-item label="机构类别：" label-position="top" prop="resource_type">
                  <el-select v-model="newShelter.resource_type" placeholder="请选择" clearable>
                    <el-option label="综合医院" value="综合医院" />
                    <el-option label="专科医院" value="专科医院" />
                    <el-option label="社区卫生服务中心" value="社区卫生服务中心" />
                    <el-option label="其他" value="其他" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="机构等级：" label-position="top" prop="resource_grade">
                  <el-select v-model="newShelter.resource_grade" placeholder="请选择" clearable>
                    <el-option label="一级" value="一级" />
                    <el-option label="二级" value="二级" />
                    <el-option label="三级" value="三级" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="地址：" label-position="top" prop="address">
                  <el-input v-model="newShelter.address" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="80" class="row-item">
              <el-col :span="8">
                <el-form-item label="经度：" label-position="top" prop="longitude">
                  <el-input type="number" @input="updateLongitude" v-model="newShelter.longitude" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="纬度：" label-position="top" prop="latitude">
                  <el-input type="number" @input="updateLatitude" v-model="newShelter.latitude" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="负责人：" label-position="top" prop="contact_person">
                  <el-input v-model="newShelter.contact_person" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="80" class="row-item">
              <el-col :span="8">
                <el-form-item label="联系方式：" label-position="top" prop="contact_number">
                  <el-input type="number" v-model="newShelter.contact_number" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>
              <el-col :span="8"></el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确认</el-button>
          <el-button @click="closeAddDialog">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- View Shelter Dialog -->
    <el-dialog class="dialog-from" v-model="isViewDialogOpen" title="医疗机构管理详情" width="900" destroy-on-close
      align-center>
      <div class="body-item">
        <div class="box-title">
          <div class="box-color"></div><strong>基本信息</strong>
        </div>
        <div class="box-content">
          <el-descriptions title="" :column="3">
            <el-descriptions-item label="机构编码：">{{ viewingShelter.resource_code }}</el-descriptions-item>
            <el-descriptions-item label="行政区划：">{{ viewingShelter.admin_div }}</el-descriptions-item>
            <el-descriptions-item label="机构名称：">{{ viewingShelter.resource_name }}</el-descriptions-item>
            <el-descriptions-item label="机构类别：">{{ viewingShelter.resource_type }}</el-descriptions-item>
            <el-descriptions-item label="机构等级：">{{ viewingShelter.resource_grade }}</el-descriptions-item>
            <el-descriptions-item label="地址：">{{ viewingShelter.address }}</el-descriptions-item>
            <el-descriptions-item label="经度：">{{ viewingShelter.longitude }}</el-descriptions-item>
            <el-descriptions-item label="纬度：">{{ viewingShelter.latitude }}</el-descriptions-item>
            <el-descriptions-item label="负责人：">{{ viewingShelter.contact_person }}</el-descriptions-item>
            <el-descriptions-item label="联系方式：">{{ viewingShelter.contact_number }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="isViewDialogOpen = false">确认</el-button>
          <el-button @click="isViewDialogOpen = false">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- Import Dialog -->
    <!-- <div v-if="isImportDialogOpen"
      class="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center">
      <div class="bg-card text-card-foreground p-5 rounded-lg shadow-xl w-[400px]">
        <h3 class="text-lg font-bold mb-4">导入避难场所记录</h3>
        <input accept=".csv, .xlsx" class="mb-4 block w-full text-sm text-muted-foreground
          file:mr-4 file:py-2 file:px-4
          file:rounded-full file:border-0
          file:text-sm file:font-semibold
          file:bg-primary file:text-primary-foreground
          hover:file:bg-primary/80" type="file" @change="handleFileUpload" />
        <div class="flex justify-end">
          <button class="bg-primary text-primary-foreground px-4 py-2 rounded mr-2" @click="importData">
            导入
          </button>
          <button class="bg-secondary text-secondary-foreground px-4 py-2 rounded" @click="closeImportDialog">
            取消
          </button>
        </div>
      </div>
    </div> -->
    <el-dialog class="dialog-from" v-model="isImportDialogOpen" title="医疗机构管理导入" width="500" destroy-on-close
      align-center>
      <el-upload class="upload-demo" ref="uploadRef" drag :limit="1" :action="`${apiBaseUrl}/medical/upload`"
        :on-change="handleFileChange" :on-success="handleUploadSuccess" :on-error="handleUploadError"
        :auto-upload="false" :before-upload="beforeUpload">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只可以上传一个文件且只能上传Excel文件！</div>
      </el-upload>
      <!-- <div class="download-text" @click="downloadTemplate">下载模版</div> -->
      <template #footer>
        <div class="dialog-footer">
          <!-- <el-button type="primary" @click="submitUpload">上传</el-button>
          <el-button @click="downloadTemplate">
            下载模板
          </el-button> -->
          <el-button @click="isImportDialogOpen = false">取 消</el-button>
          <el-button type="primary" @click="submitFile">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive } from 'vue'
import axios from 'axios'
import * as XLSX from 'xlsx'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

const apiBaseUrl = ref(proxy.$currentUrl + '/api/medical-resources')

// 搜索相关
const search = ref({
  resource_code: '',
  resource_name: '',
  resource_type: '',
  resource_grade: ''
})

// 数据相关
const shelters = ref([])
const allChecked = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)

// 对话框状态
const isAddDialogOpen = ref(false)
const uploadRef = ref(null);
const isImportDialogOpen = ref(false)
const isEditDialogOpen = ref(false)
const isViewDialogOpen = ref(false)

// 新避难场所数据
const newShelter = ref({
  id: null,
  resource_code: '',
  admin_div: '',
  resource_name: '',
  resource_type: '',
  resource_grade: '',
  address: '',
  longitude: '',
  latitude: '',
  contact_person: '',
  contact_number: '',
})

// 编辑和查看避难场所数据
const editingShelter = ref({})
const viewingShelter = ref({})

// 计算属性
const totalItems = computed(() => shelters.value.length)
const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value))
const startIndex = computed(() => (currentPage.value - 1) * pageSize.value)

const displayedShelterData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return shelters.value.slice(start, end)
})

// API 调用函数
const searchShelters = async () => {
  try {
    const response = await axios.get(`${apiBaseUrl.value}/search`, { params: search.value })
    shelters.value = response.data.map(shelter => ({ ...shelter, checked: false }))
  } catch (error) {
    console.error('搜索避难场所记录失败:', error)
    alert('搜索避难场所记录失败: ' + (error.response?.data?.message || error.message))
  }
}
const updateLongitude = (value) => {
  newShelter.value.longitude = Number(value); // 转换为数字
}
const updateLatitude = (value) => {
  newShelter.value.latitude = Number(value); // 转换为数字
}
const addNewShelter = async () => {
  try {
    const response = await axios.post(apiBaseUrl.value, newShelter.value)
    alert(response.data.message || '新增避难场所成功')
    closeAddDialog()
    await searchShelters()
  } catch (error) {
    console.error('新增避难场所失败:', error)
    alert('新增避难场所失败: ' + (error.response?.data?.message || error.message))
  }
}

const updateShelter = async () => {
  try {
    const response = await axios.put(`${apiBaseUrl.value}/${editingShelter.value.id}`, editingShelter.value)
    alert(response.data.message || '更新避难场所信息成功')
    closeEditDialog()
    await searchShelters()
  } catch (error) {
    console.error('更新避难场所信息失败:', error)
    alert('更新避难场所信息失败: ' + (error.response?.data?.message || error.message))
  }
}

const deleteSelected = async () => {
  try {
    if (selectedIds.value.length === 0) {
      alert('请至少选择一条记录进行删除')
      return
    }
    if (!confirm(`确定要删除选中的 ${selectedIds.value.length} 条记录吗？`)) {
      return
    }
    const deletePromises = selectedIds.value.map(item =>
      axios.delete(`${apiBaseUrl.value}/${item.id}`)
    )
    await Promise.all(deletePromises)
    alert('删除医疗机构成功')
    if (tableRef.value) {
      tableRef.value.clearSelection();
    }
    selectedIds.value = []
    await searchShelters()
    if (currentPage.value > totalPages.value) {
      currentPage.value = totalPages.value;
    }
    // await nextTick(); // 确保 DOM 更新
  }
  catch (error) {
    console.error('删除医疗机构失败:', error)
    alert('删除医疗机构失败: ' + (error.response?.data?.message || error.message))
  }
}

const exportData = () => {
  // 创建一个工作簿
  const wb = XLSX.utils.book_new()

  // 准备要导出的数据
  const exportData = shelters.value.map(shelter => ({
    '机构编码': shelter.resource_code,
    '行政区划': shelter.admin_div,
    '机构名称': shelter.resource_name,
    '机构类别': shelter.resource_type,
    '机构等级': shelter.resource_grade,
    '地址': shelter.address,
    '经度': shelter.longitude,
    '纬度': shelter.latitude,
    '负责人': shelter.contact_person,
    '联系方式': shelter.contact_number
  }))

  // 将数据转换为工作表
  const ws = XLSX.utils.json_to_sheet(exportData)

  // 将工作表添加到工作簿，并设置表名为"避难场所"
  XLSX.utils.book_append_sheet(wb, ws, "避难场所")

  // 生成二进制字符串
  const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' })

  // 将二进制字符串转换为 Blob
  const blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" })

  // 创建下载链接
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = '避难场所.xlsx'

  // 模拟点击下载
  link.click()

  // 释放 URL 对象
  URL.revokeObjectURL(link.href)
}

// 添加 s2ab 辅助函数
function s2ab(s) {
  const buf = new ArrayBuffer(s.length)
  const view = new Uint8Array(buf)
  for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF
  return buf
}
const formRef = ref(null)
const tableRef = ref(null)
const resetNewShelter = () => {
  newShelter.value = {
    id: null,
    resource_code: '',
    admin_div: '',
    resource_name: '',
    resource_type: '',
    resource_grade: '',
    address: '',
    longitude: '',
    latitude: '',
    contact_person: '',
    contact_number: '',
  }
}
const openAddDialog = () => {
  resetNewShelter()
  isDialogType.value = 'add'
  isAddDialogOpen.value = true
}

const closeAddDialog = () => {
  isAddDialogOpen.value = false
  resetNewShelter()
  // console.log('Add dialog closed') // 添加日志
}
const handleUploadSuccess = (response, file) => {
  alert('导入成功')
  searchShelters()
  isImportDialogOpen.value = false;
}
const handleUploadError = (error, file) => {
  alert(JSON.parse(error.message).message || '上传失败')
  isImportDialogOpen.value = false;
}
const handleFileChange = (fileList) => {
  file.value = fileList;
  // console.log(fileList.file)
};
const file = ref(null);
const beforeUpload = (file) => {
  const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
    file.type === 'application/vnd.ms-excel'
  if (!isExcel) {
    // this.$message.error('上传文件只能是 CSV 格式!');
    console.log('只能上传Excel文件！')
  }
  return isExcel;
};
const submitFile = () => {
  if (file.value) {
    // 这里可以添加文件处理逻辑
    // console.log('上传的文件:', file.value);
    uploadRef.value.submit();
    // alert('导入成功')
    // isImportDialogOpen.value = false;
  } else {
    console.log('请先选择文件')
  }
};
const openImportDialog = () => {
  resetFile()
  isImportDialogOpen.value = true
}
const resetFile = () => {
  file.value = null;
};

const closeImportDialog = () => {
  isImportDialogOpen.value = false
  importFile.value = null
  console.log('Import dialog closed') // 添加日志
}

const editShelter = (shelter) => {
  newShelter.value = { ...shelter }
  isDialogType.value = 'edit'
  isAddDialogOpen.value = true
  // editingShelter.value = { ...shelter }
  // isEditDialogOpen.value = true
  // console.log('Editing shelter:', editingShelter.value) // 添加日志
  // console.log('Edit dialog opened') // 添加日志
}
const viewDetails = (shelter) => {
  viewingShelter.value = { ...shelter }
  isViewDialogOpen.value = true
  console.log('Editing shelter:', viewingShelter.value) // 添加日志
  console.log('Edit dialog opened') // 添加日志
}

const closeEditDialog = () => {
  isEditDialogOpen.value = false
  editingShelter.value = {}
  console.log('Edit dialog closed') // 添加日志
}

const openViewDialog = (shelter) => {
  viewingShelter.value = { ...shelter }
  isViewDialogOpen.value = true
}

const closeViewDialog = () => {
  isViewDialogOpen.value = false
}

const toggleAllCheckboxes = () => {
  shelters.value.forEach(shelter => shelter.checked = allChecked.value)
}

const resetSearch = () => {
  search.value = {
    resource_code: '',
    resource_name: '',
    resource_type: '',
    resource_grade: ''
  }
  currentPage.value = 1
  searchShelters()
}

const getChineseFieldName = (fieldName) => {
  const fieldNames = {
    shelter_code: '避难场所编码',
    shelter_name: '避难场所名称',
    shelter_type: '避难场所级别',
    administrative_area: '行政区划',
    address: '地址',
    capacity: '容纳人数',
    area: '面积',
    person_in_charge: '负责人',
    contact_info: '联系方式',
    facilities: '配套设施',
    status: '当前状态',
    last_inspection_date: '最近检查日期',
    longitude: '经度',
    latitude: '纬度',
    effective_area: '有效避难面积(㎡)',
    remarks: '注'
  }
  return fieldNames[fieldName] || fieldName
}

const importFile = ref(null)

const handleFileUpload = (event) => {
  importFile.value = event.target.files[0]
  console.log('File selected:', importFile.value.name) // 添加日志
}

const importData = async () => {
  if (!importFile.value) {
    alert('请选择要导入的文件')
    return
  }
  const formData = new FormData()
  formData.append('file', importFile.value)
  try {
    const response = await axios.post(`${apiBaseUrl.value}/import`, formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    alert(response.data.message || '导入成功')
    closeImportDialog()
    await searchShelters()
  } catch (error) {
    console.error('导入失败:', error)
    alert('导入失败: ' + (error.response?.data?.message || error.message))
  }
}
// 新增提交
const handleSubmit = () => {
  try {
    formRef.value.validate(async (valid) => {
      if (valid) {
        if (!newShelter.value.id) {
          const response = await axios.post(`${apiBaseUrl.value}/add`, newShelter.value)
          alert(response.data.message || '新增医疗机构成功')
        } else {
          const response = await axios.put(`${apiBaseUrl.value}/${newShelter.value.id}`, newShelter.value)
          alert(response.data.message || '更新医疗机构成功')
        }
        await searchShelters()
        closeAddDialog()
      }
    })
  } catch (error) {
    console.error('应急避难场所失败:', error)
    alert(
      '应急避难场所失败: ' + (error.response?.data?.message || error.message),
    )
  }
}
const formItems = ref([
  {
    label: '机构编码：',
    model: 'resource_code',
    type: 'input',
    placeholder: '请输入',
  },
  {
    label: '机构名称：',
    model: 'resource_name',
    type: 'input',
    placeholder: '请输入',
  },
  {
    label: '机构类别：',
    model: 'resource_type',
    type: 'select',
    placeholder: '请选择',
    options: [
      { label: '请选择', value: '' },
      { label: '综合医院', value: '综合医院' },
      { label: '专科医院', value: '专科医院' },
      { label: '社区卫生服务中心', value: '社区卫生服务中心' },
      { label: '其他', value: '其他' },
    ],
  },
  {
    label: '机构等级：',
    model: 'resource_grade',
    type: 'select',
    placeholder: '请选择',
    options: [
      { label: '请选择', value: '' },
      { label: '一级', value: '一级' },
      { label: '二级', value: '二级' },
      { label: '三级', value: '三级' },
    ],
  },
]);
const rowKey = (row) => row.id; // 设置行的唯一标识
// 表头样式
const headerCellStyle = {
  height: '30px', // 设置表头高度
  lineHeight: '30px', // 设置行高以垂直居中
  backgroundColor: '#f2f2f2', // 可选：设置背景颜色
  // fontSize: '16px', // 可选：设置字体大小
};
const isDialogType = ref('add')
const loading = ref(false)
const selectedIds = ref([])
const handleSelectionChange = (selected) => {
  selectedIds.value = selected;
};
// 添加格式化日期时间的函数
const formatDateTime = (dateTimeString) => {
  if (!dateTimeString) return ''
  const date = new Date(dateTimeString)
  return date.toLocaleString()
}
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
  }
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
  }
}
const rules = reactive({
  admin_div: [
    { required: true, message: '请输入行政区划', trigger: 'blur' },
  ],
  shelter_code: [
    { required: true, message: '请输入避难所编码', trigger: 'blur' },
  ],
  shelter_name: [
    { required: true, message: '请输入避难所名称', trigger: 'blur' },
  ],
  address: [
    { required: true, message: '请输入地址', trigger: 'blur' },
  ],
  area: [
    { required: true, message: '请输入有效避难面积（m²）', trigger: 'blur' },
  ],
  person_in_charge: [
    { required: true, message: '请输入负责人', trigger: 'blur' },
  ],
  contact_info: [
    { required: true, message: '请输入联系方式', trigger: 'blur' },
  ],
  longitude: [
    { type: 'number', min: -180, max: 180, message: '经度必须在 -180 到 180 之间', trigger: 'blur' },
  ],
  latitude: [
    { type: 'number', min: -90, max: 90, message: '纬度必须在 -90 到 90 之间', trigger: 'blur' },
  ],
})
// 在组件挂载时获取数据
onMounted(() => {
  searchShelters()
})
</script>

<style scoped>
/* 移除所有现有的样式 */
</style>
<style lass="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
  /* 按钮居中对齐 */
}

.total-num {
  color: #02a7f0;
  font-size: 28px;
}

:deep(.dialog-from.el-dialog) {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

:deep(.dialog-from .el-dialog__header) {
  padding: 11px 17px;
  background-color: #f2f2f2;
  font-size: 18px;
}

:deep(.dialog-from .el-dialog__body) {
  padding-left: 48px;
  padding-right: 48px;
  padding-top: 20px;
}

.body-item {}

.box-title {
  margin-bottom: 10px;
}

:deep(.box-color) {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #027db4;
  margin-right: 10px;
}

.box-content {
  /* height: 80px; */
}

.row-item {
  height: 80px;
  /* margin-bottom: 20px; */
}

.input-time {
  border-radius: 4px;
  margin-top: 0;
  box-shadow: 0 0 0 1px #dcdfe6;
}

.input-time:hover {
  box-shadow: 0 0 0 1px #c0c4cc;
}

.upload-demo {
  position: relative;
  display: inline-block;
  width: 100%;
}

.upload-demo :deep(.el-upload) {
  width: 100%;
}

.input-upload {
  width: 100%;
}
</style>
